<template>
  <!-- 折线图 -->
  <div style="width: 330px; height: 330px; top: -20px;" ref="pieChartDOM"></div>
</template>



<script setup lang="ts">
import { ref, onMounted, toRef } from "vue";
import * as echarts from "echarts";
import { useGoodsStore } from "/@/store/index.ts";
const goodsStore = useGoodsStore();

let legendList = ref([]);
let pieData = ref([]);

goodsStore.$subscribe((mutation, state) => {
  pieData.value = state.goodsData.ratios;
  if (pieData.value.length > 0) {
    legendList.value = [];
    pieData.value.forEach((item, index) => {
      legendList.value.push(item.category_name);
    });
  }
  initMap();
});


const pieChartDOM = ref();

var myChart = null;
async function initMap() {
  if (myChart) {
    myChart.dispose();
  }
  myChart = echarts.init(pieChartDOM.value);

  var option = {
    title: {
      // text: "  🚀 车辆类型统计图",
      // subtext: 'Fake Data',
      // left: 'center'
    },
    tooltip: {
      trigger: "item",
      formatter: function(item) {
        let result = "";
        let index = legendList.value.indexOf(item.name);
        if (index != -1) {
          result +=
            pieData.value[index].category_name +
            " : " +
            "<br/>" +
            "占比：" +
            item.value +
            " %" +
            "<br/>"
            +
            "金额：" +
            pieData.value[index].total_price
            +
            "元"
            ;
        }
        return result;
        // "{b}:<br/> 占比：{c} %"
      },
    },
    legend: {
      bottom: 10,
      left: "center",
      data: legendList.value,
      textStyle: {
        color: "whilt",
      },
    },
    series: [
      {
        textStyle: {
        color: "#F8F8F8",
      },
        type: "pie",
        radius: "55%",
        center: ["50%", "53%"],
        selectedMode: "single",
        data: [
          {
            label: { color: 'rgb(89,253,193)' },
            value: pieData.value[0].percent,
            name: legendList.value[0],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgb(89,253,193)" },
                { offset: 1, color: "rgb(48,214,231)" },
              ]),
            },
          },
          {
            label: { color: 'rgb(37,210,234)' },
            value: pieData.value[1].percent,
            name: legendList.value[1],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgb(37,210,234)" },
                { offset: 1, color: "rgb(8,209,255)" },
              ]),
            },
          },
          {
            label: { color: 'rgb(148,107,244)' },
            value: pieData.value[2].percent,
            name: legendList.value[2],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgb(148,107,244)" },
                { offset: 1, color: "rgb(151,162,247)" },
              ]),
            },
          },
          {
            label: { color: 'rgb(98,106,241)' },
            value: pieData.value[3].percent,
            name: legendList.value[3],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgb(61,185,249)" },
                { offset: 1, color: "rgb(98,106,241)" },
              ]),
            },
          },
        ],

        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.02)",
          },
          textStyle: {
            color: "whilt",
          },
        },
      },
    ],
  };

  myChart.setOption(option);
}

onMounted(async () => {
  await initMap();
});
</script>
